<template>
  <el-form
    size="large"
    :rules="Rules"
    ref="defineForm"
    :model="formData"
    label-width="100px"
  >
    <el-form-item prop="type" label="配置类型">
      <el-radio-group v-model="formData.type" @change="changeType">
        <el-radio v-for="item in typeList" :key="item" :label="item.value">
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="configText" label="配置名称">
      <el-input clearable placeholder="请输入配置名称" v-model="formData.configText"></el-input>
    </el-form-item>
    <el-form-item prop="systemId" label="唯一标识">
      <el-input clearable placeholder="请输入唯一标识" v-model="formData.systemId"></el-input>
    </el-form-item>
    <el-form-item prop="useControl" label="使用控件">
      <el-radio-group v-model="formData.useControl">
        <el-radio-button v-for="item in controlList" :key="item" :label="item.value">{{item.label}}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="units" label="数据单位">
      <el-input clearable placeholder="请输入单位" v-model="formData.units"></el-input>
    </el-form-item>
    <el-form-item prop="action" label="数据来源">
      <el-tree-select v-model="formData.action" :data="codeTree" :render-after-expand="true"></el-tree-select>
    </el-form-item>
    <el-form-item prop="showOrder" label="配置排序">
      <el-input-number v-model="formData.showOrder" :step="5" :min="0"></el-input-number>
    </el-form-item>
    <el-form-item prop="remark" label="备注">
      <el-input v-model="formData.remark" clearable placeholder="请输入备注" type="textarea"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(defineForm)">保存</el-button>
      <el-button type="info" @click="handleClose">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getArrayText } from '@/utils/common'
import { getCode, getCodeGroupTree } from '@/api/system/code/CodeManager'
import { SystemDefineBeanData, Rules } from '@/model/system/setting/SystemDefineConstants'
import { getMaxIndex, saveDefine, getDefineById } from '@/api/system/setting/SettingDefine'

const codeTree = ref([])
const defineForm = ref()
const typeList = ref([])
const controlList = ref([])
const props = defineProps({ id: String })
const formData = ref({ ...SystemDefineBeanData })
const emit = defineEmits(['close-dialog', 'reload-data'])

const submitForm = async (defineForm) => {
  if (!defineForm) return
  defineForm.validate(valid => {
    if (valid) {
      saveDefine(formData.value).then(() => {
        ElMessage({
          message: '保存成功！',
          type: 'success',
          duration: 800
        })
        emit('reload-data')
        emit('close-dialog')
      }).catch((error) => {
        ElMessage.error(error.message || '保存失败！')
      })
    }
  })
}

const changeType = (value) => {
  formData.value.typeText = getArrayText(value, typeList.value)
}

const handleClose = () => {
  emit('close-dialog')
}

onMounted(() => {
  getCode('01GR9BVGGK61BZJZAH8KFSH2ZA').then(data => {
    controlList.value = data
  })

  getCode('01H5CX8KJVKM3HMXXZTVCE17BK').then(data => {
    typeList.value = data
  })

  getCodeGroupTree().then(data => {
    codeTree.value = data
  })

  if (props.id) {
    getDefineById(props.id).then(data => {
      formData.value = { ...data }
    })
  } else {
    formData.value.useControl = 'el-input'
    getMaxIndex().then(data => {
      formData.value.showOrder = data + 5
    })
  }
})
</script>
